<template>
    <div class="error-tip" v-if="errorCode">
        <img src="../../assets/img/error.png">
        <p>{{ errorData[errorCode] }}</p>
    </div>
</template>

<script>

import errorData from '@/datas/error.js';
import { useStore } from 'vuex';
import { computed } from 'vue';


export default {
    name: 'ErrorTip',
    setup () {
        const store = useStore()
        return {
            errorCode: computed(() => store.state.errorCode),
            errorData
        };
    }
};
</script>

<style lang='scss'>
.error-tip {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 4rem;

    img {
      width: 1rem;
      vertical-align: bottom;
    }

    p {
        margin-top: .15;
        font-size: .14;
        color: #999999;
    }
}
</style>
